/*
 * @ddescription: 淘客订单列表
 * @Author: along
 * @Date: 2020-10-26
 */
<template>
    <div class="zdOrdertbk">
        <!-- header -->
        <div class="header-nav">
            <div class="header-left">
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        订单编号:
                    </p>
                    <el-input
                        v-model="formData.trade_id"
                        placeholder="请输入订单编号"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        订单状态:
                    </p>
                    <el-select
                        v-model="formData.status"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in orderList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        订单类型:
                    </p>
                    <el-select
                        v-model="formData.type"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in ordertype"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
        </div>

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
        >
            <el-table-column
                type="index"
                width="80"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="item_img"
                label="基本信息"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
                :width="300"
            >
                <template slot-scope="scope">
                    <div
                        class="good-detail"
                        style="flex-direction: row;cursor:pointer"
                        @click="fnGoTaobao(scope.row.item_url)"
                    >
                        <div
                            class="cover"
                            :style="'background-image: url('+scope.row.item_img+')'"
                        />
                        <div class="detail">
                            <div
                                class="title ellipsis"
                                :title="scope.row.item_title"
                            >
                                {{ scope.row.item_title }}
                            </div>

                            <div class="type">
                                付款时间：{{ scope.row.order_time * 1000 | dateFormat('yyyy/MM/dd HH:mm') }}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="true_name"
                label="姓名"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="item_num"
                label="购买数量"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="item_price"
                label="商品单价"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="pay_price"
                label="实付款"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    ¥{{ scope.row.pay_price }}
                </template>
            </el-table-column>
            <el-table-column
                prop="order_type"
                label="订单类型"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    <p v-if="scope.row.order_type == 'other'">
                        其它
                    </p>
                    <p v-if="scope.row.order_type == 'flash_sale'">
                        秒杀
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                prop="order_status"
                label="订单状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    <p v-if="scope.row.order_status == 1">
                        订单付款
                    </p>
                    <p v-if="scope.row.order_status == 2">
                        订单收货
                    </p>
                    <p v-if="scope.row.order_status == -1">
                        订单取消
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                prop="trade_id"
                label="订单编号"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                :width="200"
                fixed="right"
            >
                <template slot-scope="scope">
                    {{ scope.row.trade_id }}
                </template>
            </el-table-column>
        </el-table>

        <!-- /分页 -->
        <div class="pagination-wrapper clearfixNew">
            <el-pagination
                background
                :current-page.sync="page.now_page"
                :page-size="page.page_size"
                layout="total, prev, pager, next, jumper"
                :total="page.total_count"
                @current-change="getTableData"
            />
        </div>
    </div>
</template>

<script>

const TBK = {
    trade_id: '',
    status: '', //1：订单付款，2：订单收货，-1：订单取消
    type: ''//other：其他，flash_sale：秒杀
};

export default {
    data () {
        return {
            formData: {
                ...TBK
            },
            orderList: [{value: '', label: '全部'},{value: 1, label: '订单付款'},{value: 2, label: '订单收货'},{value: -1, label: '订单取消'}],
            ordertype: [{value: '', label: '全部'},{value: 'other', label: '其它'},{value: 'flash_sale', label: '秒杀'}],
            tableData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            loading: false
        };
    },
    watch: {

    },
    filters: {

    },
    mounted () {
        if(process.client) {
            this.init();
        }
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.getTableData(1);
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.loading = true;
            this.$post('/ShopTbkOrder/getList', {
                page_id: page || this.page.now_page,
                ...this.formData
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    setTimeout(()=> {
                        this.loading = false;
                    },0);
                }
            });
        },

        /**
         * 跳转淘客
         */
        fnGoTaobao (url) {
            if (url) {
                window.open(url);
            } else {
                return;
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.zdOrdertbk {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-sizing: border-box;
    padding: 24px;
    padding-bottom: 0;
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        .header-left, .header-right {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .header-new-box {
            display: flex;
            margin-right: 15px;
            align-items: center;
            color: #333333;
            margin-bottom: 10px;
            white-space: nowrap;
            &-title {
                margin-right: 2px;
                white-space: nowrap;
                color: #333333;
            }
        }
    }
    /* 表单 */
    .scope-price {
        width: 50px;
        height: 50px;
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
    .good-detail {
        display: flex;
        align-items: center;
        .cover {
            flex-shrink: 0;
            flex-grow: 0;
            width: 60px;
            height: 60px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: 5px;
        }
        .detail {
            flex: 1;
            overflow: hidden;
            .title {
                font-size: 14px;
                color: rgba(51, 51, 51, 1);
                line-height: 20px;
                letter-spacing: 1px;
            }
            .no {
                font-size: 12px;
                font-weight: 400;
                color: rgba(96, 105, 114, 1);
                line-height: 17px;
                margin-top: 2px;
            }
            .type {
                font-size: 12px;
                font-weight: 400;
                color: rgba(96, 105, 114, 1);
                line-height: 17px;
                margin-top: 2px;
            }
        }
    }
}
</style>

<style lang="less">
.zdOrdertbk {
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        // background: #F2F2F2;
        color: #333333;
        font-weight: 500;
    }
}
</style>